<style>
    .driver {
        padding: 5px 20px;
        margin: 5px 5px;
        display: inline-block;
        border: 1px solid #1E9FFF;
        border-radius: 10px;
    }

    .active {
        color: #ffffff;
        background-color: #1E9FFF;
    }

    .driverOrder {
        padding: 5px 20px;
        margin: 5px 5px;
        display: inline-block;
        border: 1px solid #BBBBBB;
        border-radius: 10px;
    }

    .process {
        color: #0000FF;
    }

    .info {
    }

    .btn-box {
        padding: 20px 0;
    }
</style>
<script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>司机列表</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body layui-row ">
                        <div id="driverListBox"></div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field">
        <legend>派车情况</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body layui-row ">
                        <div class="layui-col-md12">
                            <div id="driverOrderListBox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="btn-box">
        <div id="doSend" class="layui-btn layui-btn-warm">执行派单</div>
    </div>

    <script type="text/html" id="driverList">
        <div class="layui-col-md12">
            {{# layui.each(d.list, function(index, driver){ }}
            <div class="driver" did="{{ driver.id }}" dname="{{ driver.name }}"><span>{{ driver.name }}</span></div>
            {{# }); }}
            {{# if(d.list.length === 0){ }}
            <div style="text-align: center;width: 100%;">无司机信息</div>
            {{# } }}
        </div>
    </script>
    <script type="text/html" id="driverOrderList">
        <div class="layui-col-md12">
            {{# layui.each(d.list, function(index, order){ }}
            <div class="driverOrder" oid="{{ order.id }}">
            <span class="process">
                {{#  if(order.process == '0'){ }}未受理
                {{#  } else if(order.process == '1'){ }}已受理
                {{#  } else if(order.process == '2'){ }}已派车
                {{#  } else if(order.process == '3'){ }}接送中
                {{#  } else if(order.process == '4'){ }}已完成
                {{#  } else if(order.process == '5'){ }}已取消
                {{#  } else{ }}未知状态{{#  } }}
            </span>
                <span class="info">{{ order.info }}</span>
            </div>
            {{# }); }}
            {{# if(d.list.length === 0){ }}
            <div style="text-align: center;width: 100%;">{{d.message}}</div>
            {{# } }}
        </div>
    </script>
    <script>
        layui.data.sendParams = function (params) {
            layui.use(['admin', 'form', 'setter', 'table', 'laytpl'], function () {
                var $ = layui.$
                    , laytpl = layui.laytpl
                    , admin = layui.admin
                    , view = layui.view
                    , setter = layui.setter
                    , table = layui.table;

                var apiUrl = setter.apiUrl;

                var selectDriverId = 0;
                var selectDriverName = '';

                //司机列表
                admin.req({
                    url: apiUrl + '/mapi/driver/list/all'
                    , method: 'get'
                    , done: function (response) {
                        console.log(response);
                        var data = {};
                        if (response.code === 0) {
                            data.list = response.data;
                        } else {
                            data.list = [];
                        }
                        var driverListTpl = driverList.innerHTML,
                            driverListBox = document.getElementById('driverListBox');
                        laytpl(driverListTpl).render(data, function (html) {
                            driverListBox.innerHTML = html;
                        });
                    }
                });


                $("body").on("click", ".driver", function () {
                    var driverId = $(this).attr('did');
                    var driverName = $(this).attr('dname');
                    selectDriverId = driverId;
                    selectDriverName = driverName;
                    //改变当前点击按钮颜色
                    $(this).addClass('active');
                    $('.driver').each(function () {
                        //取消非当前按钮颜色
                        var curDriverId = $(this).attr('did');
                        if (driverId !== curDriverId) {
                            $(this).removeClass('active');
                        }
                    })
                    //派单情况
                    admin.req({
                        url: apiUrl + '/mapi/order/driver/curr/list/' + driverId
                        , method: 'get'
                        , done: function (response) {
                            var data = {};
                            if (response.code === 0) {
                                data.list = response.data;
                                data.message = "司机【" + driverName + "】派车数据";
                            } else {
                                data.list = [];
                                data.message = "司机【" + driverName + "】派车数据异常";
                            }
                            var driverOrderListTpl = driverOrderList.innerHTML,
                                driverOrderListBox = document.getElementById('driverOrderListBox');
                            laytpl(driverOrderListTpl).render(data, function (html) {
                                driverOrderListBox.innerHTML = html;
                            });
                        }
                    });
                });


                $("body").on("click", "#doSend", function () {
                    if (selectDriverId === 0) {
                        layer.msg('请选择接送司机！', {
                            offset: '15px', icon: 1
                        });
                        return;
                    }
                    var data = {reserveId: params.id, driverId: selectDriverId};
                    console.log(data);
                    top.layer.confirm('确定将订单派给【' + selectDriverName + '】吗？', {
                            skin: 'layui-layer-admin'
                        }, function (index) {
                            top.layer.close(index);
                            admin.req({
                                url: apiUrl + '/mapi/order/send'
                                , data: JSON.stringify(data)
                                , method: 'post'
                                , done: function (response) {
                                    if (response.code === 0) {
                                        layer.msg('操作成功', {
                                            offset: '15px', icon: 1, time: 1000
                                        }, function () {
                                            layer.closeAll();
                                            layui.table.reload('LAY-order'); //重载表格
                                        });
                                    } else {
                                        layer.msg(response.msg, {
                                            offset: '15px', icon: 2
                                        });
                                    }
                                }
                            });
                        }
                    );
                })
            })
        };
    </script>